<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:j="http://tags"
                xmlns:p="http://primefaces.org/ui"
                template="/facelets/template.xhtml"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="head">
        <title>e-Home - Login</title>
    </ui:define>

    <ui:define name="body">
        <h:form id="frmContact">
            <div id="modal-contact" class="modal hide fade">
                <div class="modal-header">
                    <h:panelGrid columns="2" cellpadding="5">
                        <p:graphicImage value="/resources/img/contact.png" />
                        <h3 id="modal-title">Contate-nos!</h3>
                    </h:panelGrid>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">Gostaria de automatizar sua casa?</p>

                    <p class="center" id="modal-content">Ligue para (14) 0000-000</p>

                    <p class="center" id="modal-content">Ou envie um e-mail para <a href="mailto:contato@ehome.com.br">contato@ehome.com.br</a></p>
                </div>
                <div class="modal-footer">
                    <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary" id="modal-button">
                        <span class="add-on"><i class="icon-remove icon-white"></i></span>
                        Fechar
                    </a>
                </div>
            </div>
        </h:form>

        <div class="wrap">
            <div class="container">
                <div class="page-header">
                    <div class="logo">
                        <img id="logo" src="/EHomeWebApplication/resources/img/front-logo.png" title="e-Home - Automação Residencial"/>
                    </div>
                </div>
                <h:form id="frmLogin"
                        class="form-signin">
                    <p:remoteCommand id="cmdLogin"
                                     name="login"
                                     onstart="dlgLoader.show();"
                                     oncomplete="dlgLoader.hide();"
                                     onerror="dlgLoader.hide();"
                                     actionListener="#{sessionController.login()}"
                                     update="@all"/>

                    <p:focus context="frmLogin"/>
                    <h2 class="form-signin-heading">Login</h2>
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-envelope"></i></span>
                        <h:inputText id="txtLogin"
                                     class="input-block-level"
                                     label="Usuário"
                                     value="#{sessionController.usuario}"/>
                    </div>
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-asterisk"></i></span>
                        <h:inputSecret id="txtPassword"
                                       class="input-block-level"
                                       value="#{sessionController.senha}"/>
                    </div>
                    <p:messages autoUpdate="true" closable="true" showDetail="true" showSummary="true"/>
                    <div class="login-buttons">
                        <button id="btnEntrar"
                                type="button"
                                class="btn btn-large btn-primary"
                                onclick="login();">
                            <i class="icon-home icon-white"></i>
                            Entrar
                        </button>
                    </div>
                    <p class="forgot-link">
                        <a href="forgotPassword.jsf">Esqueci minha senha</a>
                    </p>
                </h:form>
                <div class="row center">
                    <p class="bold">Dúvidas? Clique <a href="javascript:void(0);" onclick="contact();">aqui</a></p>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>